<template>
  <div>
    <vx-card class="pt-5" v-show="userGroupList" full>
      <div class="userGroupSearchTop">
        <div class="userGroupSearch">
          <vs-input
            label="用户组名称"
            size="small"
            icon="icon-search"
            icon-pack="feather"
            icon-after="true"
            class="inputx no-icon-border"
            v-model="searchList.realName"
            @blur="filterUserGroup()"
          />
        </div>
        <vs-button
          color="primary"
          icon="icon-plus"
          icon-pack="feather"
          @click="addUser"
          size="small"
        >新增</vs-button>
      </div>
      <!-- <VuePerfectScrollbar class="scroll-area"> -->
      <vx-table
        :data="tableData"
        :total="recordsTotal"
        :pageSize="5"
        @current-change="currentChange"
        class="mt-4"
      >
        <el-table-column prop="groupName" label="用户组名称" sortable width="350"></el-table-column>
        <el-table-column label="详细配置" width="300">
          <template slot-scope="scope">
            <feather-icon
              icon="SlidersIcon"
              title="配置"
              :svgClasses="['stoke-current text-primary w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="enterConfigure(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <feather-icon
              title="编辑"
              icon="EditIcon"
              :svgClasses="['stoke-current text-primary w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleEdit(scope.$index, scope.row)"
            />
            <feather-icon
              title="复制"
              icon="CopyIcon"
              :svgClasses="['stoke-current text-primary w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleCopy(scope.$index, scope.row)"
            />
            <feather-icon
              title="删除"
              icon="Trash2Icon"
              :svgClasses="['stoke-current text-danger w-5 h-5']"
              class="cursor-pointer p-2"
              @click.stop="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </vx-table>
      <!-- </VuePerfectScrollbar> -->
      <!--新增-编辑 模态框开始 -->
      <vx-popup
        :title="popTitle"
        :active.sync="popupActivoAdd"
        :isValid="addUserGropName"
        @confirmPopup="saveAddData"
        @cancelPopup="popupActivoAdd = false"
      >
        <vs-input
          label="用户组名称："
          class="inputx red"
          data-vv-validate-on="input|blur"
          v-model="popList.realName"
          name="用户组名称"
          v-validate="'required'"
        />
        <span
          class="text-danger text-sm"
          v-show="errorBags.has('用户组名称')"
        >{{ errorBags.first('用户组名称')}}</span>
      </vx-popup>
      <!-- 新增-编辑 模态框结束 -->
      <!--复制用户组框开始 -->
      <vx-popup
        title="复制用户组"
        :active.sync="popupActivoPassword"
        :isValid="copyUserGroupName"
        @confirmPopup="copyData"
        @cancelPopup="popupActivoPassword = false"
      >
        <vs-input
          label="原用户组名称："
          class="inputx mb-2"
          v-model="popPasswordlist.noriginalGroupName"
          disabled
        />
        <vs-input
          label="新用户组名称："
          class="inputx"
          v-model="popPasswordlist.newGroupName"
          name="新用户组名称"
          v-validate="'required'"
        />
        <span
          class="text-danger text-sm"
          v-show="errorBags.has('新用户组名称')"
        >{{ errorBags.first('新用户组名称')}}</span>
      </vx-popup>
      <!-- 复制用户组模态框结束 -->
      <!--删除模态框开始 -->
      <vx-popup
        title="删除"
        :active.sync="popupActivoDel"
        :isValid="true"
        @confirmPopup="delData"
        @cancelPopup="popupActivoDel = false"
      >
        <span>确定删除这条数据吗？</span>
      </vx-popup>
      <!-- 删除模态框结束 -->
    </vx-card>
    <usergroup-configure
      v-show="userGroupConfigure"
      @returnPrev="selfHide"
      :usergroupdata="userGroupData"
      :userGroupId="groupId"
      :userGroupConfigure="userGroupConfigure"
    ></usergroup-configure>
  </div>
</template>
<script>
import UsergroupConfigure from "./UserGroupConfigure-component/UserGroupConfigure.vue";
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  data() {
    return {
      popTitle: "新增",
      searchList: {
        realName: ""
      },
      userGroupList: true,
      userGroupConfigure: false,
      tableData: [],
      popList: {
        realName: "",
        userName: "",
        contactInformation: "",
        status: ""
      },
      popPasswordlist: {
        noriginalGroupName: "",
        newGroupName: "",
        confirmnewGroupName: ""
      },
      groupParams: {
        groupName: ""
      },
      groupId: "",
      userGroupData: {},
      popupActivoAdd: false,
      popupActivoPassword: false,
      popupActivoDel: false,
      recordsTotal: 0,
      currentPage: 1
    };
  },
  methods: {
    //分页
    currentChange(currentPage) {
      this.currentPage = currentPage * 5 - 5;
      this.filterUserGroup(currentPage * 5 - 5);
    },
    //表格行新增
    addUser() {
      this.popTitle = "新增";
      this.popList.realName = "";
      this.popupActivoAdd = true;
      this.$validator.reset();
    },
    //表格行编辑
    handleEdit(index, row) {
      this.popupActivoAdd = true;
      this.popTitle = "修改用户组";
      this.popList.realName = row.groupName;
      this.groupParams["userGroupId"] = row.userGroupId;
    },
    //复制用户组
    handleCopy(index, row) {
      // console.log(row,"[[[]]]")
      this.popPasswordlist.newGroupName = "";
      this.popupActivoPassword = true;
      this.popPasswordlist.noriginalGroupName = row.groupName;
      this.groupId = row.userGroupId;
    },
    copyData() {
      this.popupActivoPassword = false;
      let params = {
        groupName: this.popPasswordlist.newGroupName,
        userGroupId: this.groupId
      };
      this.$api.accessControl
        .userGroupClone(params)
        .then(res => {
          if (res.data.success) {
            this.$vs.notify({ text: "复制成功", color: "success" });
            this.filterUserGroup(this.currentPage);
          } else {
            this.$vs.notify({
              text: "复制失败" + res.data.message,
              color: "danger"
            });
          }
        })
        .catch(() => {
          this.$vs.notify({ text: "复制失败", color: "danger" });
        });
    },
    //表格行删除
    handleDelete(delIndex, delRow) {
      this.popupActivoDel = true;
      this.groupId = delRow.userGroupId;
    },
    delData() {
      this.popupActivoDel = false;
      this.$api.accessControl.userGroupDel(this.groupId).then(res => {
        if (res.status == 200) {
          this.filterUserGroup(this.currentPage);
          this.$vs.notify({ text: "删除成功", color: "danger" });
        } else {
          this.$vs.notify({ text: "删除失败", color: "danger" });
        }
      });
    },
    //跳转配置页面
    enterConfigure(index, row) {
      console.log(index,row)
      this.userGroupData = row;
      console.log(this.userGroupData,"/////")
      this.userGroupList = false;
      this.userGroupConfigure = true;
      this.groupId = row.userGroupId;
    },
    //返回列表页面
    selfHide() {
      this.userGroupList = true;
      this.userGroupConfigure = false;
      this.userGroupData = {};
       this.filterUserGroup(this.currentPage);
    },
    saveAddData() {
      this.popupActivoAdd = false;
      this.groupParams.groupName = this.popList.realName;
      this.$api.accessControl
        .userGroupAdd(this.groupParams)
        .then(res => {
          if (res.data.success) {
            this.$vs.notify({ text: "保存成功", color: "success" });
            this.filterUserGroup(this.currentPage);
          } else {
            this.$vs.notify({ text: "保存失败", color: "danger" });
          }
        })
        .catch();
    },
    //模糊查询
    filterUserGroup(start) {
      let params = {
        start: start || 0,
        length: 5,
        groupName: this.searchList.realName
      };
      this.$api.accessControl
        .userGroupTable(params)
        .then(res => {
          this.tableData = res.data.data;
          this.recordsTotal = res.data.recordsTotal;
        })
        .catch(() => {});
    }
  },
  components: {
    UsergroupConfigure,
    VuePerfectScrollbar
  },
  computed: {
    copyUserGroupName() {
      return !this.errorBags.any() && this.popPasswordlist.newGroupName != "";
    },
    addUserGropName() {
      return !this.errorBags.any() && this.popList.realName != "";
    }
  },
  created() {
    this.filterUserGroup();
    // console.log(this.$api.accessControl.userGroupTable,"/////")
  }
};
</script>

<style lang="scss" scoped>
/deep/.vs-input--input.normal {
  font-size: 11.9px;
}
.userGroupSearchTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .vs-component.vs-con-input-label.vs-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 22rem;
    /deep/ .vs-input--label {
      margin-right: 0.8rem;
    }
    /deep/ .vs-inputx.vs-input--input.hasIcon.icon-after-input {
      padding: 0.7rem 1rem !important;
    }
  }
}
.userGroupSearch {
  position: relative;
}

//弹窗
/deep/ .vs-popup {
  width: 400px;
  .con-select,
  .vs-input {
    width: 100%;
    margin: 0 auto;
  }
}
</style>
